import React, { Component } from "react";

class App extends Component {
  state = {
    count: 1,
    name: "tom",
    show: true,
    list: [1, 2, 3, 4],
    content: "<h1>haha</h1>",
  };

  fn() {
    // 直接修改数据是没有响应式的，必须要使用setState方法才行
    // console.log(this.state.name);

    // 当修改完的值不依赖修改前的值的时候，用对象更加简单
    // 当修改完的值要依赖修改前的值的时候，用函数更加安全

    // setState在18版本里面都是异步的
    // 17版本的时候
    // setState在合成事件里面是异步
    // setState在生命周期里面是异步
    // setState在定时器里面是同步的
    // setState在原生js的事件监听里面是同步的

    // setState的第一种语法，使用对象
    // setState是异步执行的
    // setState可以接受第二个参数，是一个回调函数，这个会在数据修改完之后调用
    // this.setState(
    //   {
    //     name: "jerry",
    //   },
    //   () => {
    //     console.log(this.state.name);
    //   }
    // );
    // this.setState({
    //   count: this.state.count + 1,
    // });

    // setState的第一种语法，使用函数，可以接受参数prevState(表示前一次的state的值)
    // setState可以接受第二个参数，是一个回调函数，这个会在数据修改完之后调用
    // this.setState((prevState) => ({
    //   count: prevState.count + 1,
    // }));
    this.setState(
      (prevState) => ({
        count: prevState.count + 1,
      }),
      () => {
        console.log(this.state.count);
      }
    );
  }

  handleClick() {
    this.setState((prevState) => {
      console.log(prevState);
      return {
        show: !prevState.show,
      };
    });
  }

  push() {
    // this.setState(
    //   (prevState) => {
    //     return {
    //       // list: prevState.list.push(5), ×
    //       // list: [...prevState.list, 5], √
    //       list: prevState.list.concat(5),
    //     };
    //   },
    //   () => {
    //     console.log(this.state.list);
    //   }
    // );

    // 复杂的数据类型，只要地址不变，不会让我们使用setState
    this.state.list.push(5);
    this.setState({});
  }

  render() {
    return (
      <>
        <h2>setState修改state</h2>
        <p>
          name: {this.state.name} -{" "}
          <button onClick={this.fn.bind(this)}>btn</button>
        </p>
        <p>
          count: {this.state.count} -{" "}
          <button onClick={this.fn.bind(this)}>btn</button>
        </p>

        <button onClick={this.handleClick.bind(this)}>btn</button>
        {this.state.show && <p>hello</p>}

        <ul>
          {/* key的作用和用法和vue一样 */}
          {this.state.list.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </ul>
        <button onClick={this.push.bind(this)}>push 5</button>

        {/* dangerouslySetInnerHTML相当于vue的v-html */}
        {/* 只能对你信得过的内容使用v-html */}
        {/* <div>{this.state.content}</div> */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }

  // 相当于mounted
  componentDidMount() {
    this.setState({
      name: "rose",
    });
    console.log(this.state.name);

    // setTimeout(() => {
    //   this.setState({
    //     name: "rose",
    //   });
    //   console.log(this.state.name);
    // }, 1000);

    // window.addEventListener("xxx", () => {
    //   this.setState({
    //     name: "rose",
    //   });
    //   console.log(this.state.name);
    // });
  }
}

export default App;

// {
//   data() {
//     return {
//       list: [1,2,3]
//     }
//   },
//   methods: {
//     push() {
//       this.list.push(4)
//     }
//   }
// }
